<html>
  <head>
    <title>CSS box-shadow demo</title>
    <style>
      body { margin:0; background:#bbb; padding:40dip; 
             flow: vertical-flow; border-spacing:40dip; }
             
      div { width:150dip; height:150dip; 
            background:#fff; padding:15dip; border-radius:6dip; }
      div:nth-child(2n) { clear:after; }
      div.inner1 { box-shadow: inset 5dip 5dip 20dip #555;  }
      div.outer1 { box-shadow: 5dip 5dip 20dip #555; }
      
      div.inner2 { background: #aaa;
                   box-shadow: inset -5dip -5dip 10dip #fff,
                               inset 5dip 5dip 10dip #555; }
      div.outer2 { background: #aaa;
                   box-shadow: -5dip -5dip 10dip #fff,
                               5dip 5dip 10dip #555; }


      div.inner3 { background: #aaa;
                   box-shadow: inset 0 0 5dip 15dip #fff,
                               inset 0 0 5dip 5dip #999; }

      div.outer3 { background: #aaa; 
                   box-shadow: 0 0 25dip 5dip #fff,
                               0 0 5dip #111; }

    </style>
  </head>
<body>

  <div class="outer1">outer shadow</div>
  <div class="inner1">inner shadow</div>

  <div class="outer2">outer shadows</div>
  <div class="inner2">inner shadows</div>
  
  <div class="outer3">outer shadows</div>
  <div class="inner3">inner shadows</div>



</body>
</html>
